<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小说简介</title>
		<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
			<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
			 
			<link href="css/index.css" rel="stylesheet" type="text/css"/>
			<link href="css/novel.css" rel="stylesheet" type="text/css"/>

		<style>
			.user-logout{
				color: #222222;
			}
			.user-logout:hover{
				color: orange;
			}
		</style>
	</head>
	<body>
		
		
		<div id="app">
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="index.html">首页</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookstore.html">书库</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookshelf.html">书架</a>
							 
						</div>
						<div class="right-shouye">
							<a href="ranking.html">排行榜</a>
							 
						</div>
						<div class="right-search">
							<input placeholder="请输入书名或作者名" v-model="selectneirou">
							<img @click="select()" style="cursor: pointer;width: 15px;height: 18px;" src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/%E6%90%9C%E7%B4%A21.png" />

						</div>
						<div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						<div class="right-user">
							<a  v-if="!isLogged" href="login.html"> <div class="user-login">登录</div></a>
							<a v-if="!isLogged" href="login.html"><div class="user-reg">注册</div></a>
							<div v-if="isLogged" style="display: flex; align-items: center;cursor: pointer;"  >
								<el-avatar   icon="el-icon-user-solid" :src="this.user.avatar"> </el-avatar>
								<span @click="geren()"  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.user.username}} </span>
							</div>
							<div v-if="isLogged" style="display: flex; align-items: center;">
								<span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							</div>

						</div>




					</div>
				</div>
			</div>
			
			<div class="td-novel">
				<div class="td-novel-page">
					<div class="novel-page-zhong">
						<div>
							<el-breadcrumb separator="/"   >
							  <el-breadcrumb-item   ><a href="index.html">首页</a> </el-breadcrumb-item>
							  <el-breadcrumb-item    > <a href="#">书名</a> </el-breadcrumb-item>
							   
							</el-breadcrumb>
						</div>
						<div class="page-info">
							<div class="cover_image">
								<img :src="novel.coverImage" />
								
							</div>
							<div class="info">
								<div class="info-name"><h1>{{novel.title}}</h1></div>
								<div class="info-label">

									<span class="info-label-yellow" v-if="novel.statu == 1">连载中</span>
									<span class="info-label-yellow" v-else-if="novel.statu == 0">已完结</span>
									<span class="info-label-grey">{{novel.categoryName}}</span>
								</div>
								<div class="info-count">
									<div class="info-count-word">
										<span class="detail">{{this.bookCount}}</span>
										<span class="text">万字</span>
									</div>
								</div>
								<div class="info-last">
									<a href="#" class="chapter-item-title" target="_blank">
										<span class="info-last-title">最近更新：{{this.chapterzuihou}}</span>
									</a>
									<span class="info-last-time">{{this.Time}}</span>
								</div>
								 <el-button type="warning" round @click="onSubmit"  style= "position: absolute;bottom: 0;width: 150px;margin-top: 8px; font-size: 14px;  height: 32px;border-radius: 16px;">开始阅读</el-button>
								
							</div>
							
							<div class="author">
								<div class="author-divider"></div>
								<div class="author-info">

									<a>
										<div class="author-name"  @click="chakanauther()">
											<span class="author-name-logo"></span>
											<span class="author-name-text">{{author.authorName}}</span>
										</div>
									</a>
										<div class="author-desc">{{author.motto}}</div>
								</div>
							</div>
							
						</div>
					</div>
				</div>
				
				<div class="page-body-wrap">
					<div class="page-body">
						<div class="page-abstract-header"><h2>作品简介</h2></div>
						<div class="page-abstract-content">
							<p> 
							  {{novel.introduction}}
							</p>
						</div>
						<div class="page-directory-header">
							<h3><span>目录</span><span class="directory-dot"></span>{{this.number}}章</h3>
						</div>
						<div class="page-directory-content">
							<div>
<!--								<div class="volume volume_first">-->
<!--									第一卷<span class="volume-dot"></span>共3063章-->
<!--								</div>-->
								
								<div class="chapter">
									<div class="chapter-item" v-for="c in chapter ">
										<a :href="'content.html#'+c.chapterId" class="chapter-item-title" target="_blank">{{c.chapterTitle}}</a>
									</div>

								</div>
							</div>
							
						</div>
					</div>
					
				</div>
				
				
			</div>
			
			<div class="td-footer">
				  <p>Company Name</p>
				 <p>Address: 123 Street, City, Country</p>
				 <p>Email: info@example.com</p>
			</div>
		</div>
	</body>
	
	<script>
	
	
	var v = new Vue({
		el : "#app",
		data() {
			  
			 return {
				  isSticky: false,
				 bookCount: 0,  //小说字数
				 chapterzuihou: '', //最近更新章节
				 Time: '',  //最近更新时间
				 number: '',  //章节数
				 novel:{
					  novelId: '',
					  title: '',
					  authorId: '',
					  categoryId: '',
					 categoryName: '',
					 introduction: '',
					  statu: '',
					  coverImage: '',

				 },
				 author: {
					 authorId: '',
					 authorName: '',
					 motto: '',
				 },
				 chapter: [{
					  chapterId: '',
					  chapterTitle:'',
					 publishDate: '',
					  count: 0,

				 }],
				 user:{
					 userId: '',
					 username: '',
					 avatar: '',
				 },
				 isLogged: false,
				 selectneirou: '',
				   
				};
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);
			// 获取 URL 中的参数值（以 # 号分隔）
			let hashValue = window.location.hash;

			// 去掉 # 号，只保留值部分
			 this.novel.novelId  = hashValue.substring(1);
			 this.selectId();
			 this.selectChapter();
			 this.iflogin();






		},
		methods: {
			handleScroll() {
				const scrollHeight = window.scrollY || document.documentElement.scrollTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;
			},
			selectId(){
				axios.post('/other/novel/selectId',this.novel).then(res => {
					this.novel = res.data;
					this.selectAuthor();

				});

			},
			selectAuthor(){
				axios.get('/other/author/selectAuthor?authorId='+this.novel.authorId).then(res => {
					this.author = res.data;

				});
			},

			selectChapter(){
				axios.get('/other/selectChapter?novelId='+this.novel.novelId).then(res => {
					this.chapter = res.data;
					this.chapter.forEach(c => {
						this.bookCount = c.count+this.bookCount;
					});
					this.bookCount =  (this.bookCount / 10000).toFixed(2);
					this.chapterzuihou = this.chapter[this.chapter.length-1].chapterTitle;
					this.Time = this.chapter[this.chapter.length-1].publishDate;
					this.number = this.chapter.length;

				});
			},

			Jump(chapterId){
				window.location.href = 'content.html#'+chapterId;
			},
			onSubmit(){
				window.location.href = 'content.html#'+this.chapter[0].chapterId;
			},
			iflogin(){
				axios.get('/user/iflogin').then(res=>{


					if(res.data != ""){
						this.user.userId = res.data
						axios.get('/user/getUser?userId='+this.user.userId).then(res=>{
							this.user = res.data;
						});
						this.isLogged =  true;
					}

				});

			},
			logout(){
				axios.post('/user/logout').then(res=>{
					this.isLogged = false;
					this.iflogin();
					window.location.href = "index.html";

				});

			},
			chakanauther(){
				window.location.href = 'selectauthor.html#'+this.novel.authorId;
			},
			// 搜索
			select(){
				axios.get('/other/select/select?selectneirou='+this.selectneirou).then(res=>{
					if(res.data == "ok"){
						window.location.href = "select.html"
					}

				});

			},
			geren(){
				window.location.href = "user.html"
			},



		}
		 
		 
		 
	})
	</script>
</html>
